﻿@model ThemeListModel

@using SmartStore.Web.Framework.UI;
@using SmartStore.Admin.Models.Themes;
@using SmartStore.Core.Themes;

@{
    ViewBag.Title = T("Admin.Configuration.Themes").Text;
}

@using (Html.BeginForm())
{
    <div class="section-header">
        <div class="title">
            <i class="fa fa-fill-drip"></i>
            @T("Admin.Configuration.Themes")
        </div>
        <div class="options">
			@{ Html.RenderWidget("admin_button_toolbar_before"); } 

            <button type="submit" name="save" value="save" class="btn btn-warning">
                <i class="fa fa-check"></i>
                <span>@T("Admin.Common.Save")</span>
            </button>
			<a href='@Url.Action("ReloadThemes", new { storeId = Model.StoreId })' class="btn btn-secondary">
				<i class="fa fa-sync"></i>
				<span>@T("Admin.Configuration.Themes.Reload")</span>
			</a>
			<a id="uploadpackage" href="#uploadpackage-window" data-toggle="modal" class="btn btn-secondary" role="button">
				<i class="fa fa-upload"></i>
				<span>@T("Admin.Packaging.UploadTheme")</span>
			</a>

			@{ Html.RenderWidget("admin_button_toolbar_after"); }
        </div>
    </div>

	<div class="multi-store-scope well px-0 py-2">
		<table class="adminContent adminContent-boxed">
		<tr>
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.StoreId)
			</td>
			<td class="adminData">
				@Html.DropDownList("StoreId", Model.AvailableStores, new { onchange = "location.href = '" + @Url.Action("List") + "?storeId=' + this.value;" })
			</td>
		</tr>
		</table>
	</div>

    @Html.SmartStore().TabStrip().Name("themes-tab").Style(TabsStyle.Material).Items(x =>
    {
        x.Add().Text(T("Admin.Configuration.Themes")).Content(ThemesTab()).Selected(true);
        x.Add().Text(T("Admin.Common.Settings")).Content(ThemeSettingsTab());

        EngineContext.Current.Resolve<IEventPublisher>().Publish(new TabStripCreated(x, "themes-config", this.Html, this.Model));
    })
}

@helper ThemesTab()
{
	if (Model.Themes.Count > 0)
	{
        @ThemeList(Model.Themes, T("Admin.Configuration.Themes.AvailableDesktopThemes"))
	}
    
    <script>
		$(function () {
            $("#themes-tab").on("click", ".set-as-defaulttheme", function (e) {
                var el = $(this);
                var name = el.data("name");
                var hidden = $('#@Html.FieldIdFor(x => x.DefaultTheme)');

                hidden.val(name);

                el.closest("form").submit();

                return false;
            });
        });
    </script>
}

@helper ThemeList(IList<ThemeManifestModel> themes, string caption)
{
	<fieldset>
		<legend class="mb-3">@caption</legend>

		<div id="theme-list" class="row sm-gutters">
			@foreach (var theme in themes)
			{
				var isActive = theme.IsActive;
				var isBroken = theme.State != ThemeManifestState.Active;
				
				<div class="col-auto" style="width: 280px">

					<div class="card shadow-sm theme-item@(isActive ? " active" : "")@(isBroken ? " broken" : "")" @Html.Attr("title", theme.Description.EmptyNull(), theme.Description.HasValue())>
						<div class="card-img-top theme-thumbnail" style="background-image: url('@Url.Content(theme.PreviewImageUrl)')"></div>

						<div class="card-body p-3">
							<h4 class="h5 text-truncate">
								@(theme.Title ?? theme.Name)
								@if (theme.BaseTheme.HasValue())
								{
									<small class="fs-sm text-muted" title='@T("Admin.Configuration.Themes.IsBasedOn"): @theme.BaseTheme'>
										<i class="fa fa-@(isBroken ? "unlink" : "link") fa-flip-horizontal"></i>
										@theme.BaseTheme
									</small>
								}
							</h4>
							<div class="theme-info fs-xs text-truncate">
								@if (theme.Author.HasValue())
								{
									<span>@T("Admin.Configuration.Themes.Author"): </span><span class="text-muted">@theme.Author, </span>
								}
								<span>@T("Admin.Configuration.Themes.Version"): </span><span class="text-muted">@theme.Version</span>
							</div>
							<div class="theme-buttons d-flex mt-3">
								@if (!theme.IsActive)
								{
									<a href="#" class="btn btn-primary btn-sm set-as-defaulttheme@(isBroken ? " invisible" : "")" data-name="@theme.Name">
										@T("Admin.Common.Activate")
									</a>
								}
								else
								{
									<a href="#" class="btn btn-secondary btn-sm disabled">
										<i class="fa fa-check"></i>
										@T("Common.Active")
									</a>
								}

								@if (!isBroken)
								{
									<div class="btn-group ml-auto">
										<a class="btn btn-outline-secondary btn-sm tooltip-toggle" href='@Url.Action("Preview", "Theme", new { theme = theme.Name, storeId = Model.StoreId })' title="@T("Admin.Configuration.Themes.Preview")">
											<i class="far fa-fw fa-eye"></i>
										</a>
										@if (theme.IsConfigurable)
										{
											<a class="btn btn-outline-secondary btn-sm tooltip-toggle" href='@Url.Action("Configure", "Theme", new { theme = theme.Name, storeId = Model.StoreId })' title="@T("Admin.Common.Configure")">
												<i class="fa fa-fw fa-paint-brush"></i>
											</a>
										}
									</div>
								}

							</div>
						</div>

						@if (isBroken)
						{
							<div class="theme-broken-badge" title='@T("Admin.Configuration.Themes.MissingBaseTheme", theme.BaseTheme).Text'>
								<i class="fa fa-exclamation"></i>
							</div>
						}
					</div>
				</div>

			}
		</div>

	</fieldset>
}

@helper ThemeSettingsTab()
{
    @Html.HiddenFor(x => x.DefaultTheme)
    
    @Html.ValidationSummary(false)
    <table class="adminContent">
		<tr>
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.AllowCustomerToSelectTheme)
			</td>
			<td class="adminData">
				@Html.CheckBoxFor(model => model.AllowCustomerToSelectTheme, new { data_toggler_for = "#pnlSaveThemeChoiceInCookie" })
				@Html.ValidationMessageFor(model => model.AllowCustomerToSelectTheme)
			</td>
		</tr>
		<tr id="pnlSaveThemeChoiceInCookie">
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.SaveThemeChoiceInCookie)
			</td>
			<td class="adminData">
				@Html.EditorFor(model => model.SaveThemeChoiceInCookie)
				@Html.ValidationMessageFor(model => model.SaveThemeChoiceInCookie)
			</td>
		</tr>
        <tr>
            <td colspan="2" class="adminSeparator">
                <hr />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="alert alert-info alert-dismissible">
					<button type="button" class="close" data-dismiss="alert">&times;</button>
                    <h4>@T("Admin.Configuration.Themes.Options.Title")</h4>
                    <p>@T("Admin.Configuration.Themes.Options.Info")</p>
                </div>
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.SmartLabelFor(model => model.BundleOptimizationEnabled)
            </td>
            <td class="adminData">
                @Html.DropDownListFor(model => model.BundleOptimizationEnabled, Model.AvailableBundleOptimizationValues)
                @Html.ValidationMessageFor(model => model.BundleOptimizationEnabled)
            </td>
        </tr>
		<tr>
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.AssetCachingEnabled)
			</td>
			<td class="adminData">
				@Html.DropDownListFor(model => model.AssetCachingEnabled, Model.AvailableAssetCachingValues)
				@Html.ValidationMessageFor(model => model.AssetCachingEnabled)
			</td>
		</tr>
		<tr>
			<td class="adminTitle">
				&nbsp;
			</td>
			<td class="adminData">
				<a href="@Url.Action("ClearAssetCache")" class="btn btn-danger">
					<span>@T("Admin.Configuration.Themes.ClearAssetCache")</span>
				</a>
			</td>
		</tr>
    </table> 
}

@{ Html.RenderAction("UploadPackage", "Packaging", new { isTheme = true }); }